<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
		
		 * {
		 	 margin: 0;
		 	 padding: 0;
		 }

		 .line {
		 	 width: 980px;
		 	 height: 100px;
		 	 margin: 100px auto;
		 	 border-radius: 10px;
		 	 /* 线性渐变 */
		 	 background-image: linear-gradient(
                135deg,
                yellow 25%,
                green 25%,
                green 50%,
                yellow 50%,
                yellow 75%,
                green 75%,
                green 100%
		 	 );

		 	 background-size: 100px 100px;
		 	 animation: move 2s linear infinite;
		 }

		 @keyframes  move {
		 	  from {
		 	  	 background-position: 0px;
		 	  }

		 	  to {

				 background-position: 100px;
		 	  }
		 }

	</style>
</head>
<body>
	

	    <div class="line"></div>
</body>
</html>